<template>
<div class="kg-head-he"></div>
<header class="kg-head reg-top">
	<div class="dqxz"  @click="back"><i class="micon">&#xe61e;</i></div>
	<div class="search_box show-cansu">
		我的报名
	</div>
</header>
<!---->
<div class="kg-center">
		<!---->
		<div class="xy-ksbox mb25" v-for="(item,i) in list" :key="i">
			<div class="title">
			  <div class="title_a">{{item.sign_time}}</div>
			  <div class="title-c" v-if="item.pay_status.val==10">{{item.pay_status.text }}</div>
			  <div class="title-c" v-if="item.pay_status.val==20 && item.addr_status.val==10">{{ item.addr_status.text }}</div>
			  <div class="title-c" v-if="item.addr_status.val==20 && item.file_id==0">报名成功</div>

			  <!-- 报名信息核对中 -->
			</div>
			
			<div class="kg-ksxqbox">
				<div class="kg-ksxq-list">
					<div class="kg-ksxq-lista">考生姓名</div>
					<div class="kg-ksxq-listb">{{item.nick_name}}</div>
				</div>
				<div class="kg-ksxq-list">
					<div class="kg-ksxq-lista">考级卡号</div>
					<div class="kg-ksxq-listb">{{item.grade_code}}</div>
				</div>
				<div class="kg-ksxq-list">
					<div class="kg-ksxq-lista">考点信息</div>
					<div class="kg-ksxq-listb">{{item.addr_title}} / {{item.type.text}}</div>
				</div>
				<div class="kg-ksxq-list kg-ksli-heat">
					<div class="kg-ksxq-lista">考级内容</div>
					<div class="kg-ksxq-listb">{{item.major_first}} / {{item.major_second}} / {{item.grade}} / {{item.sign_item}}</div>
				</div>
				<div class="kg-ksxq-list">
					<div class="kg-ksxq-lista">报考费用</div>
					<div class="kg-ksxq-listb">￥ {{item.pay_price}}</div>
				</div>
			</div>
			<div class="xy-ksbox-shangchu">
				<div class="but-b" @click="del(item)" v-if="item.pay_status.val==10 && item.addr_status.val==10">删除</div>
			</div>
			<router-link :to="`/pay?sign_id=${item.sign_id}`"  class="but-b"   v-if="item.pay_status.val==10">请上传支付凭证</router-link>
			
			<div class="but-b" @click="go(item)" v-if="item.pay_status.val==20 && item.addr_status.val==10 && item.type.val==10">报名信息审核中（缴费后7天后查看审核结果，审核通过后上传视频）</div>
			<div class="but-b" @click="go(item)" v-if="item.pay_status.val==20 && item.addr_status.val==10 && item.type.val==20">报名信息审核中（缴费后7天后查看审核结果，审核通过后查看准考证）</div>

			<div class="but-b" @click="go(item)" v-if="item.addr_status.val==20">报名成功</div>
		</div>
		<a-empty :description="null" v-if="!list.length">暂无数据</a-empty>
<!---->   	
</div>
</template>

<script>
import { list,del } from '@/api/sign/index'
import { useRouter } from 'vue-router';
import { message,Modal } from 'ant-design-vue';

import { createVNode } from 'vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
export default {
  name: 'Index',
  data(){
	return{
	  router : useRouter(),
      isLoading: false,// 正在加载
	  list:[],
	  current_page:0,
	  last_page:0
	}
  },
  created () {
   
    this.getList()
  },
  methods: {
	back(){this.$router.go(-1)},
    getList() {
		
		list().then((result)=>{
			this.list = result.data.list.data;
			this.current_page = result.data.list.current_page
			this.last_page = result.data.list.last_page
		})
    },
	go(item){
		this.$router.push('detail?sign_id='+item.sign_id);
	},
	del(item){
		let self = this;
		Modal.confirm({
			title: '温馨提示',
			icon: createVNode(ExclamationCircleOutlined),
			content: createVNode('div', { style: 'color:red;' }, '删除后无法恢复，确认删除吗？'),
			okText:'确定',
			cancelText:'取消',
			onOk() {
				del({sign_id:item.sign_id}).then((result)=>{
					message.success(result.message)
					self.getList()
				})
			},
			onCancel() {},
			class: 'test',
		});	
		
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.but-b{height: auto; padding: 10px; line-height: 1.55;}
.xy-ksbox-shangchu{width: 100%; height: auto; background: #fafafa; padding-right: .2rem; display: flex; justify-content: flex-end; overflow:hidden;}
.xy-ksbox-shangchu .but-b{display: block; width: auto; padding: .2rem .266667rem; background: #e2e2e2; font-size: 0.32rem; color: #777; border-radius: .2rem; margin:.2rem 0 .2rem .2rem;}
.kg-ksli-heat{height: auto;}
.kg-ksli-heat .kg-ksxq-listb{padding: .24rem .2rem .24rem .4rem; line-height: 1.65;}
</style>
